<template>
	<view style="display: flex;flex: 1;">
		
		
		<view class="wrap share__canvas1 " id="content">
			<view class="title draw_canvas" data-type="text" :data-text="data.title">
				{{data.title}}
			</view>
			<view class="imgs draw_canvas">
				<image :src="data.imgs" mode="aspectFill" class="draw_canvas" data-type="image" :data-url="data.imgs"></image>
			</view>
			<view class="centent draw_canvas">
				<view class="text-t draw_canvas" data-type="text" data-text="工作内容：">
					工作内容：
				</view>
				<view class="text-c draw_canvas">
					<div v-for="(item,index) in contentArr" :key="index" class="draw_canvas" data-type="text" :data-text="item">{{item}}</div> 
				</view>
				<view class="text-t text-d draw_canvas" data-type="text" :data-text="'工作地址：'+ data.address">
					工作地址： {{data.address}}
				</view>
			</view>
			<view class="code-wrap draw_canvas">
				<image :src="codeUrl" mode="" class="code-url draw_canvas" data-type="image" :data-url="codeUrl"></image>
				<view class="text draw_canvas">
					<view class="text-big draw_canvas" data-type="text" data-text="微信[扫一扫]">
						微信"扫一扫"
					</view>
					<view class="text-big draw_canvas" data-type="text" data-text="获取详情信息">
						获取详情信息
					</view>
				</view>
			</view>
		</view>
		 <view style="margin: auto;">
		 	<canvas v-if="canvasShow" canvas-id="canvasPage" :style="{height: rectHeight + 'px'}" class="share__canvas"></canvas>
		 	<u-button type="primary" @click="ctrlImg"  class="btns">一键保存</u-button>
		 </view>
	</view>
</template>

<script>
	import Wxml2Canvas from '@/static/js/src/index.js'; 
	export default {
		props: {
			data: {
				type: Object
			},
			codeUrl: {
				type: String
			}
		},
		data() {
			return {
				saveImg: '',
				rectHeight: 428,
				canvasShow: false,
				// contentArr: []
			}
		},
		computed:{
			contentArr() {
				console.log(this.data.content.split(/[\s\n]/))
				return this.data.content.split(/[\s\n]/) || []
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this)
			query.select('#content').boundingClientRect(rect=>{
				console.log(rect)
			  let height = rect.height;
			  this.rectHeight = rect.height
			  this.$nextTick(() => {
			  	this.canvasShow = true
			  	console.log(height);
			  	this.drawImage1(height)
			  })
			}).exec();
		},
		methods: {
			   drawImage1 (height) {
			        let self = this;
			        this.drawImage1 = new Wxml2Canvas({
			            width: 340, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
			            height: height, // 高
			            element: 'canvasPage', 
			            background: '#fefefe',
						obj: this,
			            progress (percent) {
							console.log(percent)
			            },
			            finish(url) {
							console.log(url)
			                self.saveImg = url
			            },
			            error (res) {
							console.log(res)
			            }
			        });
			
			        let data = {
			            list: [{
			                type: 'wxml',
			                class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
			                limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
			                x: 0,
			                y: 0
			            }]
			        }
			
			        this.drawImage1.draw(data);
			    },
				ctrlImg() {
					uni.saveImageToPhotosAlbum({
						filePath: this.saveImg,
						fail:(err) =>{
							if(err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showModal({
									title: '调试',
									content: '请打开保存图片权限！',
									showCancel: false
								})
							}
							
						}
					})
				}
		}
	}
</script>

<style lang="scss" scoped>
	.share__canvas{
		background: #fff;
		// position: fixed;
		top: 0;
		left: 0;
		width: 600rpx;
		margin: 0 auto;
	}
	.wrap{
		margin: auto;
		background: #FFFFFF;
		width: 600rpx;
		position: absolute;
		left: -1000px;
	}
	.title{
		    font-size: 30rpx;
		    padding: 20rpx 0;
		    text-align: center;
		    font-weight: bold;
		    color: #000;
	}
	.imgs{
		width: 100%;
		height: 400rpx;
		&>image{
			width: 100%;
			height: 100%;
		}
	}
	.centent{
		margin: 20rpx;
	}
	.text-t{
		font-size: 28rpx;
	}
	.text-c{
		font-size: 26rpx;
	}
	.text-d{
		padding: 20rpx 0;
	}
	.code-wrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 30rpx;
		.code-url{
			width: 200rpx;
			height: 200rpx;
		}
		.text-big{
			font-size: 32rpx;
			margin: 10rpx;
		}
	}
</style>
